<script setup>
import {
  InfoFilled,
  Avatar,
  Histogram,
  ZoomIn,
  Bell,
  ArrowRight,
  HelpFilled,
  DocumentChecked
} from "@element-plus/icons-vue";
import { onMounted, ref, watch } from "vue";
import { useRouter, useRoute } from "vue-router";
import { htmlToPDF } from "@/utils/html2pdf.ts";
const router = useRouter();
const route = useRoute();
const filepath = route.query.filepath;

console.log('Analisis'+filepath)

const pathList = ref();

const goToHome = () => {
  router.push({
    name: "home",
  });
};

const goToModel = () => {
  router.push({
    name: "model",
    query: { filepath: filepath },
  });
};

const goToPdf = () => {
  router.push({
    name: "pdf",
    query: { filepath: filepath },
  });
};

const gotoBasic = () => {
  router.push({
    name: "basic",
    query: { filepath: filepath },
  });
};

const goToStaticAnalysis = () => {
  router.push({
    name: "staticAnalysis",
    query: { filepath: filepath },
  });
};

const goToDynamicAnalysis = () => {
  router.push({
    name: "dynamicAnalysis",
    query: { filepath: filepath },
  });
};

const goToCodeAnalysis = () => {
  router.push({
    name: "codeAnalysis",
    query: { filepath: filepath },
  });
};

const goToDyAna = () => {
  router.push({
    name: "dyAna",
    query: { filepath: filepath },
  });
};

const getCurrentPath = () => {
  pathList.value = route.matched.filter((item) => item.meta.title);
};

watch(
  route,
  (to, from) => {
    pathList.value = to.matched.filter((item) => item.meta.title);
  },
  { immediate: true }
);

onMounted(() => {
  router.push({
    name: "basic",
    query: { filepath: filepath },
  });
  getCurrentPath();
});
</script>

<template>
  <div class="common-layout" >
    <el-container>
      <!-- 侧边导航栏 -->
      <el-aside>
        <el-row class="tac">
          <el-col :span="24">
            <div class="system">APP分析系统</div>
            <el-menu default-active="1" class="el-menu-vertical-demo">
              <el-menu-item index="1" @click="gotoBasic">
                <el-icon><InfoFilled /></el-icon>
                <span>信息</span>
              </el-menu-item>
              <el-menu-item index="3" @click="goToStaticAnalysis">
                <el-icon><Avatar /></el-icon>
                <span>应用权限</span>
              </el-menu-item>
              <el-menu-item index="4" @click="goToDynamicAnalysis">
                <el-icon><Histogram /></el-icon>
                <span>API</span>
              </el-menu-item>
              <el-menu-item index="5" @click="goToCodeAnalysis">
                <el-icon><ZoomIn /></el-icon>
                <span>源码分析</span>
              </el-menu-item>
              <el-menu-item index="6" @click="goToDyAna">
                <el-icon><Bell /></el-icon>
                <span>动态解析</span>
              </el-menu-item>
              <el-menu-item index="7" @click="goToModel">
                <el-icon><HelpFilled /></el-icon>
                <span>模型分析</span>
              </el-menu-item>
              <el-menu-item index="8" @click="goToPdf">
                <el-icon><DocumentChecked /></el-icon>
                <span>导出报告</span>
              </el-menu-item>
            </el-menu>
          </el-col>
        </el-row>
      </el-aside>
      <el-container>
        <!-- 顶部 -->
        <el-header class="title">
          <el-breadcrumb :separator-icon="ArrowRight">
            <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item
              :to="item.path"
              v-for="item in pathList"
              :key="item.id"
              >{{ item.meta.title }}</el-breadcrumb-item
            >
          </el-breadcrumb>

          <el-button
            type="primary"
            size="large"
            style="font-weight: bold; margin-top: 13px"
            class="derive"
            plain
            @click="goToHome"
            >首页
          </el-button>
        </el-header>
        <!-- 主体 -->
        <el-main>
<!--          <router-view />-->
          <router-view v-slot="{ Component, route }">
            <keep-alive :include="openMenu">
              <component v-if="route.meta.keepAlive" :is="Component" :key="route.name" />
            </keep-alive>
            <component v-if="!route.meta.keepAlive" :is="Component" :key="route.name" />
          </router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<style scoped>
.el-header {
  border-bottom: 1px solid #dcdfe6;
}
.el-main {
  height: 100vh;
}
.system {
  height: 60px;
  font-size: 20px;
  font-weight: bold;
  text-align: center;
  line-height: 60px;
  border-right: 1px solid #dcdfe6;
}
.tac {
  width: 185px;
  position: fixed;
  top: 0;
}
.el-aside {
  width: 185px;
}
.derive {
  float: right;
  margin: 0 10px;
}
.mb-2 {
  text-align: center;
  font-size: 20px;
  margin: 10px 0;
}
.el-menu-item {
  font-size: 16px;
  justify-content: left;
}
.el-menu {
  height: 100vh;
}
.title {
  position: sticky;
  right: 20px;
  top: 0;
  z-index: 9999;
  width: 100%;
  background-color: #fff;
}
.el-breadcrumb {
  float: left;
  margin-top: 20px;
}
</style>